<template>
  <!-- 政策平台 -->
  <div class="app-container">
    <div class="all-laws">
      <el-row>
        <el-col :span="24">
          <ComSelect :options="options" @EventChange="changeFn"></ComSelect>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <comForm
            ref="comForm"
            @EventReset="resetFn"
            @EventOnsubmit="queryFn"
            :list="comForm"
          >
          </comForm>
        </el-col>
      </el-row>

      <ComTable
        @handleSizeChange="currentPageSizeChangeFn"
        @handleCurrentChange="currentPageChangeFn"
        :key="romdom"
        :list="tableList"
        :modes="tableModes"
        :config="{ border: true, loading }"
        :pagination="{ total: paging.total, pageNum: paging.pageNum }"
      >
        <el-table-column #default="{ row }" align="left">
          <template v-if="currentSelect === ''">
            <!-- <el-button @click="
                $router.push({
                  path: '/contentPlatform/article/article-details',
                  query: row,
                })
              "
                       plain
                       size="mini"
                       type="primary">查看</el-button> -->
            <el-button @click="clickLook(row)" plain size="mini" type="primary"
              >查看</el-button
            >
            <el-button plain size="mini" type="danger" @click="deleteFn(row)"
              >删除</el-button
            >
          </template>
          <template v-else-if="row.status === 0">
            <el-button
              plain
              size="mini"
              type="primary"
              @click="
                $router.push({
                  path: '/contentPlatform/article/article-details',
                  query: { id: row.idStr },
                })
              "
              >查看</el-button
            >
          </template>
          <template v-else-if="row.status == 2">
            <el-button
              plain
              size="mini"
              type="primary"
              @click="goTODefailFn(row)"
              >失败原因</el-button
            >
          </template>
          <template v-else-if="row.status == 4">
            <el-button
              plain
              size="mini"
              type="primary"
              @click="
                $router.push({
                  path: '/contentPlatform/article/article-details',
                  query: { id: row.idStr },
                })
              "
              >详细</el-button
            >
            <el-button plain size="mini" type="primary">数据详细</el-button>
          </template>
        </el-table-column>
      </ComTable>
    </div>
  </div>
</template>

<script>
import ComForm from "../../../components/comForm.vue";
import ComSelect from "../../../components/comSelect.vue";
import ComTable from "../../../components/comTable.vue";
import comForm from "../../../components/comForm.vue";
import { getListDataApi } from "@/wss/api/label";

// import { getPolicyListApi, getPolicyRemoveApi } from '@/wss/api/article.js'
import { getPolicyListApi, getPolicyRemoveApi } from "@/wss/api/doc/policy.js";

export default {
  components: { ComSelect, ComForm, comForm, ComTable },

  data() {
    return {
      initSelectValue: "",
      // 加载状态
      loading: false,
      // 分页配置
      paging: {
        total: 10,
        pageNum: 1,
        pageSize: 10,
        status: 0,
      },
      // 修复切换”审核不会更新bug“
      romdom: "",
      currentSelect: "",
      currentShowText: {
        first: "查看",
        second: "删除",
      },
      options: {
        value: "",
        title: "快速筛选",
        list: [
          {
            value: "",
            label: "全部",
          },
          {
            value: "0",
            label: "待编辑",
          },
          {
            value: "1",
            label: "审核中",
          },
          {
            value: "3",
            label: "已完成",
          },
          {
            value: "2",
            label: "审核失败",
          },
          {
            value: "9",
            label: "编辑中",
          },
        ],
      },
      // 动态生成筛选下拉
      selectLabelArr: [],
      // 表格的数据
      tableList: [
        {
          type: "selection",
        },
        {
          type: "index",
          label: "编号",
        },
        {
          label: "内容名称",
          mode: "title",
          showOverflowTooltip: true,
        },
        {
          label: "来源",
          mode: "from",
          width: 200,
        },
        {
          label: "状态",
          mode: "status",
          width: 100,
          align: "center",
          isShowTag: true,
          options: [
            {
              l: "待编辑",
              v: 0,
            },
            {
              l: "待审核",
              v: 1,
            },
            {
              l: "审核失败",
              v: 2,
              type: "danger",
            },
            {
              l: "已完成",
              v: 3,
            },
          ],
        },
        {
          label: "创建时间",
          mode: "createTime",
        },
      ],
      tableModes: [
        {
          type: "selection",
        },
        {
          type: "index",
          label: "编号",
        },
        {
          label: "内容名称",
          mode: "title",
          showOverflowTooltip: true,
        },
        {
          label: "来源",
          mode: "from",
        },
        {
          label: "状态",
          mode: "status",
          width: 100,
          align: "center",
          isShowTag: true,
          options: [
            {
              l: "待编辑",
              v: 0,
            },
            {
              l: "待审核",
              v: 1,
            },
            {
              l: "审核失败",
              v: 2,
              type: "danger",
            },
            {
              l: "已完成",
              v: 3,
            },
          ],
        },
        {
          label: "创建时间",
          mode: "createTime",
        },
      ],

      comForm: {
        modes: [
          {
            placeholder: "请输入内容名称",
            formType: "input",
            mode: "title",
            label: "内容名称",
            value: "",
          },
          {
            placeholder: "请输入来源",
            formType: "input",
            mode: "from",
            label: "来源",
            value: "",
          },
          {
            placeholder: "请选择日期",
            formType: "datePicker",
            mode: "createTime",
            dateType: "datetime",
            label: "生效日期",
            value: "",
            pickerType: "datetime",
          },
        ],
      },
    };
  },
  mounted() {
    // this.getArticleListFn()
    this.getPolicyListApiMet(this.paging);
  },
  methods: {
    // // 动态生成标签列表   🧨有大类太多相同的了，所以有些方法和属性移动到了 src\wss\utils\wss.js🧨
    // async getLabelFn() {
    //   let { rows } = await getListDataApi();
    //   this.comForm.modes.forEach((item) => {
    //     if (item.mode === "mark") {
    //       item.select = rows.map((item) => {
    //         return { label: item.content, value: item.idStr };
    //       });
    //     }
    //   });
    // },
    // 查看失败原因
    goTODefailFn(row) {
      this.$router.push({
        path: "/contentPlatform/article/article-failReason",
        query: { id: row.idStr },
      });
    },
    // 重设函数
    resetFn() {
      this.initSelectValue = "";
      this.romdom = Math.random();
      this.options.value = "";
      this.paging.status = "";
      console.log(this.paging, "重设");
    },
    // 列表查询

    async getPolicyListApiMet(pagination = null) {
      this.loading = true;
      let result = await getPolicyListApi(pagination).then((res) => res);
      console.log(result.data, "政策");

      if (result.code == 200) {
        // 获取总条数
        this.paging.total = result.data.total;

        // // 深拷贝
        // const newArr = JSON.parse(JSON.stringify(data.rows))
        // // 转换状态
        // newArr.forEach((item) => {
        //   if (item.status === 0) {
        //     item.status = '代编辑'
        //   } else if (item.status === 1) {
        //     item.status = '审核中'
        //   } else if (item.status === 2) {
        //     item.status = '审核失败'
        //   } else {
        //     item.status = '已完成'
        //   }
        // })
        // this.tableList = newArr
        result.data.rows.forEach((item, index) => {
          if (item.mark instanceof Array) {
            item.mark = item.mark.join("");
          }
        });
        this.selectLabelArr = [];
        this.tableList = result.data.rows;
        this.selectLabelArr = this.arrTransformObj(this.selectLabelArr);
        this.loading = false;
      }
    },
    // 动态切换筛选字段和获取标签
    async currentStatusFn(value) {
      // 获取所有标签并且动态生成
      const getLabelFn = async () => {
        let { rows } = await getListDataApi();
        console.log(rows, "label");
        this.comForm.modes.forEach((item) => {
          if (item.mode === "labelId") {
            item.select = rows.map((item) => {
              return { label: item.content, value: item.idStr };
            });
          }
        });
      };
      const resetFilterFn = () => {
        this.comForm = {
          modes: [
            {
              placeholder: "请输入内容名称",
              formType: "input",
              mode: "title",
              label: "内容名称",
              value: "",
            },
            {
              placeholder: "请输入来源",
              formType: "input",
              mode: "from",
              label: "来源",
              value: "",
            },

            {
              placeholder: "请选择日期",
              formType: "datePicker",
              mode: "createTime",

              label: "创建时间",
              value: "",
              formType: "datePicker",
              pickerType: "datetime",
            },
          ],
        };
      };

      this.tableModes = [
        {
          type: "selection",
        },
        {
          type: "index",
          label: "编号",
        },
        {
          label: "内容名称",
          mode: "title",
          showOverflowTooltip: true,
        },
        {
          label: "来源",
          mode: "from",
          width: 200,
        },
        {
          label: "状态",
          mode: "status",
          width: 100,
          align: "center",
          isShowTag: true,
          options: [
            {
              l: "待编辑",
              v: 0,
            },
            {
              l: "待审核",
              v: 1,
            },
            {
              l: "审核失败",
              v: 2,
              type: "danger",
            },
            {
              l: "上架",
              v: 4,
            },
            {
              l: "下架",
              v: 5,
            },
          ],
        },
        {
          label: "创建时间",
          mode: "createTime",
        },
      ];
      // 审核中
      if (value == 1) {
        this.tableModes[5].label = "提交时间";
        this.tableModes[5].mode = "updateTime";
        // 初始化筛选字段
        resetFilterFn();
      } else if (value == 2) {
        this.tableModes[5].label = "提交时间";
        this.tableModes[5].mode = "updateTime";
        this.tableModes.push({
          label: "审核时间",
          mode: "verifyTime",
        });
        // 初始化筛选字段
        resetFilterFn();
        // 上架
      } else if (value == 4) {
        this.tableModes = [
          {
            type: "selection",
          },
          {
            mode: "no",
            label: "内容编号",
          },
          {
            label: "内容类型",
            mode: "type",
            showOverflowTooltip: true,
          },
          {
            label: "内容标题",
            mode: "title",
            showOverflowTooltip: true,
          },
          {
            label: "标签",
            mode: "mark",
            showOverflowTooltip: true,
          },

          {
            label: "上架日期",
            mode: "updateTime",
          },
        ];
        this.comForm = {
          modes: [
            {
              placeholder: "请输入来源",
              formType: "input",
              mode: "no",
              label: "内容编号",
              value: "",
            },
            {
              placeholder: "请输入内容名称",
              formType: "input",
              mode: "title",
              label: "内容名称",
              value: "",
            },

            {
              formType: "select",
              mode: "labelId",
              label: "内容标签",
              value: "",
              select: [],
            },
            {
              mode: "temp",
              formType: "datePicker",
              label: "提交日期",
              value: "",
              pickerType: "daterange",
              startPlaceholder: "开始日期",
              endPlaceholder: "结束日期",
            },
          ],
        };
        // 获取所有标签并且动态生成
        getLabelFn();
        // let { rows } = await getdocGetTypeApi(this.paging);
        // console.log(rows, "rowrow");
        // this.tableList = rows
      } else {
        // 初始化筛选条件
        resetFilterFn();
      }
    },
    // 筛选提交数据
    async queryFn(arr) {
      // 查询函数
      arr.forEach((item) => {
        console.log(item);
        for (const key in item) {
          this.paging[key] = item[key];
          // 获取结束时间和开始时间
          if (item.temp && item.temp instanceof Array) {
            this.paging.beginTime = item.temp[0];
            this.paging.endTime = item.temp[1];
            this.paging.temp = null;
          }
        }
      });
      this.paging.pageNum = 1;
      if (this.currentSelect == 4) {
        // 成功时候需要调用另一个接口
        let { rows } = await getdocGetTypeApi(this.paging);
        this.tableList = rows;
        return;
      }
      console.log(this.paging, "page");
      // 筛选数据
      this.getArticleListFn();
    },
    // 页容量发生变化时候
    currentPageSizeChangeFn(pageSize) {
      this.paging.pageSize = pageSize;
      this.getArticleListFn();
    },
    // 当前页发生变化时候
    currentPageChangeFn(pageNum) {
      this.paging.pageNum = pageNum;
      this.getArticleListFn();
    },
    // 获取数据列表
    async getArticleListFn() {
      this.loading = true;
      let { data } = await getPolicyListApi(this.paging);
      // 获取总条数
      this.paging.total = data.total;
      // 深拷贝
      const newArr = JSON.parse(JSON.stringify(data.rows));
      // 转换状态
      newArr.forEach((item) => {
        if (item.status === 0) {
          item.status = "代编辑";
        } else if (item.status === 1) {
          item.status = "审核中";
        } else if (item.status === 2) {
          item.status = "审核失败";
        } else {
          item.status = "已完成";
        }
      });
      this.tableList = newArr;
      this.loading = false;
    },
    resetFilterFn() {
      this.comForm = {
        modes: [
          {
            placeholder: "请输入内容名称",
            formType: "input",
            mode: "title",
            label: "内容名称",
            value: "",
          },
          {
            placeholder: "请输入来源",
            formType: "input",
            mode: "from",
            label: "来源",
            value: "",
          },
          {
            placeholder: "请选择日期",
            formType: "datePicker",
            mode: "createTime",
            dateType: "datetime",
            label: "生效日期",
            value: "",
            pickerType: "datetime",
          },
        ],
      };
    },
    // 删除
    async deleteFn(row) {
      this.$confirm("你确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let { msg } = await getPolicyRemoveApi({ id: row.id });
          this.getArticleListFn();
          this.$message({
            type: "success",
            message: msg,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    GoExamineFn(row) {
      console.log(row, "row");
      this.$router.push({
        path: "/contentSupervision/AuditManagement/contentReview",
        query: row,
      });
    },
    GotoDetailFn(row) {
      this.$router.push({
        path: "/contentPlatform/askAnswer/askAnswer-details",
      });
    },
    async changeFn(value) {
      this.currentSelect = value;
      // 每次快熟筛选更新就清空筛选字段
      this.$refs.comForm.resetFn();
      this.options.value = value;
      this.paging = {
        pageNum: 1,
        pageSize: 10,
        type: "文章",
        status: "",
        total: 10,
      };
      this.paging.status = value;

      await this.getPolicyListApiMet(this.paging);
      // 改变筛选字段
      this.currentStatusFn(value, this);
      // 修复切换”审核不会更新bug“
      this.romdom = Math.random();
    },

    // 查看
    clickLook(row) {
      this.$router.push({
        path: "/contentPlatform/article/article-details",
        query: { id: row.idStr },
      });
    },
  },
};
</script>

<style lang ="scss" scoped>
</style>
